<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 模板字符串
        // 字符串的定义方式：单引号' '  双引号" "  反单引号` `
        // 反单引号就是字符串的增强版，特点就是可以在里面支持变量的输出： ${ }
        // 模板字符串支持多行输出

        // 以前在字串中输出变量
        let url = "http://www.baidu.com";
        let title = "百度";

        // 拼装成一个超链接
        console.log('<a href="'+url+'">'+title+'</a>');

        // 使用模板字符串的方式:
        console.log(`<a href="${url}">${title}</a>`);
        // 使用单双引号定义多行字串时，使用\处理
        let str ="韩句到事且弟死文甲位向着处中，\
生常者，\
尤事终所反也";

        // 使用反单引号可以直击定义多行字串，所有空格缩进都会保留
        let str2 =`韩句到事且弟死文甲位向着处中，
        生常者，
        尤事终所反也`;

        console.log(str2);


        //将下面的数据输出到模板ul标签中
        let data = [
            {name:"张三",sex:1},
            {name:"李四",sex:0},
            {name:"王五",sex:1},
            {name:"赵六",sex:0},
        ];
        
        let s = '<ul>';
        data.forEach(function(item){
            s += `<li>${item.name} : ${item.sex}</li>`;
        });
        s += "</ul>";

        document.write(s);


        //③： 模板标签(了解)：
        alert("Hello");
        // 下面的写法等价于上面的写法
        alert`World!`;
        
    </script>
</body>
</html>